<template>
  <view class="home-wrap">
		<view class="header">
			<image class ="banner" src="../../static/images/home/banner.png"></image>
			<view class="left-container">
				<view class="name">你好，{{userName}}</view>
				<view class="date bot">今天是{{date.info}} 星期{{date.week}}</view>
        <view class="bot">{{lunar.length ? lunar: ''}}  {{terms.length ? terms : ''}}</view>
			</view>
			<view class="right-container">
				<view class="temperature">{{temperature? temperature: '25'}}</view>
				<view class="weather">
					<view>{{weatherType ? weatherType:'未知'}}</view>
					<view>{{location ? location : '正在定位'}}</view>
				</view>
			</view>
		</view>
		<view class="meau-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view v-for ="(item, index) of meauListOne" :key="index" class="meau-item" :class="item.className" @click="handleSkip(item.path)">
				<image :src="item.imgUrl"></image>
				<view class="desc">{{item.desc}}</view>
				<view v-if="item.messageNum" class="message">{{item.messageNum}}</view>
			</view>
			<view class="my-container">
				<view v-for ="(item, index) of meauListTwo" :key="index" class="meau-item-tow" :class="item.className" @click="handleSkip(item.path)">
					<image :src="item.imgUrl"></image>
					<view class="desc">{{item.desc}}</view>
					<view v-if="item.messageNum" class="message">{{item.messageNum}}</view>
				</view>
			</view>
			<view v-for ="(item, index) of meauListThr" :key="index" class="meau-item" :class="item.className" @click="handleSkip(item.path)">
				<image :src="item.imgUrl"></image>
				<view class="desc">{{item.desc}}</view>
				<view v-if="item.messageNum" class="message">{{item.messageNum}}</view>
			</view>
			<view class="project-container" :class="show?'show': ''">
				<scroll-view :scroll-y="true" class="scroll-Y">
				<view class="project-title">提醒</view>
				<view v-if="show" class="project-list">
					<view class="project-item" v-for="(item,index) of remindList" :key="index">
						<view class="project-item-left" :class="{gray: calcColor(item.courseStartTime)}"></view>
						<view class="project-info" :class="{gray: calcColor(item.courseStartTime)}">{{item.courseStartTime}}</view>
						<view class="project-info" :class="{gray: calcColor(item.courseStartTime)}">{{item.dictName}}</view>
						<view class="project-info" :class="{gray: calcColor(item.courseStartTime)}">{{item.teacherName}}</view>
					</view>
				</view>
			</scroll-view>
			</view>
		</view>
  </view>
</template>
<script>
import { weather, unread, remind } from '../../api/home'
const lunarCalendar = require('../../utils/lunarCalendar')
import { zeroFill } from '../../utils/index'
export default {
  name: 'home',
	props: {
		pullDown: {
			type: String,
			default: ''
		}
	},
  data() {
    return {
			date: null,
			show: false,
			location: '',
			weatherType: '',
			temperature: '',
			touch: {
				status: false,
				statrX: 0,
				endX: 0
			},
			meauListOne: [
				{
					imgUrl: '../../static/images/home/my-work.png',
					path: '/pages/homework/index',
					className: 'home-work',
					desc: '我的作业',
					messageNum: 0
				},
				{
					imgUrl: '../../static/images/home/online-work.png',
					path: '/pages/online-homework/index',
					className: 'online-work',
					desc: '在线作业',
					messageNum: 0
				},
				{
					imgUrl: '../../static/images/home/score.png',
					path: '/pages/achievement-analysis/index',
					className: 'score',
					desc: '我的成绩分析',
				},
				{
					imgUrl: '../../static/images/home/school.png',
					path: '/pages/scholl-info/index',
					className: 'school',
					desc: '校园信息',
					messageNum: 0
				}
			],
			meauListTwo: [
				{
					imgUrl: '../../static/images/home/project.png',
					path: '/pages/class-schedule/index',
					className: 'project',
					desc: '我的课程表',
				},
				{
					imgUrl: '../../static/images/home/address-book.png',
					path: '/pages/address-book/index',
					className: 'address-book',
					desc: '我的通讯录',
					messageNum: 0
				},
				{
					imgUrl: '../../static/images/home/leave.png',
					path: '/pages/leave/index',
					className: 'leave',
					desc: '请假|销假',
					messageNum: 0
				},
				{
					imgUrl: '../../static/images/home/food.png',
					path: '/pages/mess/index',
					className: 'food',
					desc: '我的食堂',
				}
			],
			meauListThr: [
				{
					imgUrl: '../../static/images/home/assistant.png',
					path: '/pages/assistant/index',
					className: 'assistant',
					desc: '高考助手',
				},
				{
					imgUrl: '../../static/images/home/demand.png',
					path: '/pages/bunch-planting/index',
					className: 'demand',
					desc: '课程点播',
				},
			],
			terms: '',
			lunar: '',
			userName: '',
			remindList: []
    }
  },
	watch: {
		pullDown:{
			handler: 'pullDownRefresh'
		},
		show(val) {
			console.log(val)
			this.initPullDown()
		}
	},
	created() {
		this.initDate()
		this.initLocation()
		const user = uni.getStorageSync('USER_INFO')
		this.userName = user ? JSON.parse(user).userName : ''
	},
	methods:{
		//是否刷新
		initPullDown() {
			const _this = this
			// #ifdef APP-PLUS
				const pages = getCurrentPages()
				const page = pages[pages.length-1]
				const currentWebview = page.$getAppWebview();
				currentWebview.setStyle({
					pullToRefresh: {
						support: !_this.show
					}
				})
			// #endif
		},
		// 日期
		initDate() {
      const day = ['日', '一', '二', '三', '四', '五', '六']
			const date = new Date()
      const info = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
      const week = `${day[date.getDay()]}`
      this.date  = {
        week,
        info
			}
			const _year = date.getFullYear()
			const _month = date.getMonth() + 1
			const _day = date.getDate()
			const lunar = lunarCalendar.solarToLunar(_year,_month,_day)
			this.lunar = `农历${lunar.lunarMonthName}${lunar.lunarDayName}`
			this.initLunar()
		},
		// 农历
		initLunar() {
			const now = new Date()
			const monthDay = `${zeroFill(now.getMonth() + 1)}${zeroFill(now.getDate())}`
			const year = now.getFullYear()
			const terms = lunarCalendar.getYearTerm(year)
			const newTerms = Object.keys(terms)
			const result = Object.keys(terms).findIndex((item) => {
				return item.indexOf(monthDay) > -1
			})
			
			this.terms = result > -1 ? terms[newTerms[result]] : null
		},
		// 定位
		initLocation() {
			const _this = this
			uni.getLocation({
				geocode:true,
				success(res) {
					const lon = res.longitude
					const lat = res.latitude
					const location = res.address.city
					_this.location = location
					_this.initInfo(lon, lat, location)
				},
				async fail(e) {
					// _this.left = true
					const resUnread = await unread()
					const resRemind = await remind()
					_this.initUnRead(resUnread)
					_this.initRemind(resRemind)
					// _this.$locationFuc()
				}
			})
		},
		// 安排
		handleProject() {
			this.show = !this.show
		},
		handleTouchStart(e) {
			if (e.touches[0].pageX < 40) {
				this.touch.status = true
			}
			this.touch.statrX = e.touches[0].pageX
		},
		handleTouchMove(e) {
			if(!this.touch.status){
				if (this.show) {
					this.touch.endX = e.touches[0].pageX
				}
				return
			} else {
				this.touch.endX = e.touches[0].pageX
			}
		},
		handleTouchEnd(e) {
			const {endX, statrX} = this.touch
			this.touch.status = false
			if (statrX > 0 && endX - statrX > 0) {
				this.show = true
			} else if (endX > 0 && endX - statrX < -50) {
				this.show = false
			}
			this.touch.endX = 0
			this.touch.statrX = 0
		},
		// 初始化
		async initInfo(lon, lat, location){
			const res = await weather({lon, lat, location})
			const resUnread = await unread() 
			const resRemind = await remind()
			this.initWeather(res)
			this.initUnRead(resUnread)
			this.initRemind(resRemind)
			this.$locationFuc()
		},
		//天气
		initWeather(req) {
			const info = JSON.parse(req)
			const {temperature, text} = info.results[0].now
			this.temperature = temperature
			this.weatherType = text
		},
		// 未读
		initUnRead(res){
			this.meauListOne[0].messageNum = res.taskCount
			this.meauListOne[1].messageNum = res.onlineTaskCount
			this.meauListOne[3].messageNum = res.schoolMsgCount
			this.meauListTwo[1].messageNum = res.leaveCount
			this.meauListTwo[2].messageNum = res.mailListCount
		},
		// 提醒
		initRemind(res) {
			this.remindList = res
		},
		// 页面跳转
		handleSkip(url){
			uni.navigateTo({
				url,
				animationType:'pop-in'
			})
		},
		// 计算颜色
		calcColor(str) {
			const now = new Date().getHours()
			const s = str.substring(0,2)
			return Number(s) < now
		},
		// 下拉刷新
		async pullDownRefresh(val) {
			if (val === 'home' ){
				const resUnread = await unread()
				const resRemind = await remind()
				this.initUnRead(resUnread)
				this.initRemind(resRemind)
				this.$emit('update:pullDown','')
			}
		}
	}
  
}
</script>
<style lang="scss" scoped>
.home-wrap {
  width: 100%;
	height: 100vh;
	background-color: #f0f0f0;
	.header{
		width: 100%;
		height: 273upx;
		padding: 78upx 35upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		color: #fff;
		position: relative;
		.banner {
      width: 100%;
      height: 100%;
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
		}
		.left-container{
      position: absolute;
      top: 78upx;
      left: 35upx;
			width:354upx;
			height:117upx;
      z-index: 2;
			.name{
				font-size: 31upx;
				line-height: 31upx;
				margin-bottom: 30upx;
			}
			.bot{
				font-size: 25upx;
				line-height: 40upx;
			}
		}
		.right-container{
			display: flex;
			align-items: flex-start;
      position: absolute;
      z-index: 2;
      top: 78upx;
      right: 35upx;
			.temperature {
				font-size: 63upx;
				line-height: 60upx;
				position: relative;
				&::after{
				content: '';
				position: absolute;
				top: 0;
				right: -20upx;
				width: 10upx;
				height: 10upx;
				border: 2upx solid #fff;
				border-radius: 50%;
				
			}
			}
			.weather{
				margin-top: -10upx;
				margin-left: 25upx;
				width: 120upx;
				font-size:21upx;
				line-height:31upx;
				transform: scale(0.8)
			}
		}
	}
	.meau-container{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20upx;
		box-sizing: border-box;
		position: relative;
		.home-work{
			width:351upx;
			height:221upx;
			background:rgba(13,132,213,1);
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width:64upx;
				height:92upx;
				margin-right: 38px;
			}
			.message{
				font-size: 75upx;
				color: #fff;
				font-weight: bold;
			}
		}
		.online-work{
				width:351upx;
				height:221upx;
				background:#B3D465;
				display: flex;
				justify-content: center;
				align-items: center;
			image{
				width:70upx;
				height:93upx;
				margin-right: 38px;
			}
			.message{
				font-size: 75upx;
				color: #fff;
				font-weight: bold;
			}
		}
		.score{
			width: 100%;
			background-color: #8C97CB;
			height:171upx;
			image{
				margin-top: 27upx;
				margin-left: 397upx;
				width:84upx;
				height:114upx;
			}
			.desc{
				font-size: 52upx;
			}
		}
		.school{
			width:280upx;
			height:314upx;
			background:rgba(37,188,210,1);
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width:89upx;
				height:105upx;
				margin-right: 42upx;
			}
			.message{
				font-size: 94upx;
				color: #fff;
				font-weight: bold;
			}
		}
		.assistant{
			width:419upx;
			height:178upx;
			background:rgba(255,194,50,1);
			display: flex;
			justify-content: center;
			padding-top: 43upx;
			box-sizing: border-box;
			image{
				width:107upx;
				height:73upx;
			}
		}
		.demand{
			width:283upx;
			height:178upx;
			background:rgba(196,144,191,1);
			display: flex;
			justify-content: center;
			padding-top: 34upx;
			box-sizing: border-box;
			image{
				width:86upx;
				height:69upx;
			}
		}
		.meau-item{
			position: relative;
			margin-bottom: 11upx;
			.desc{
				position: absolute;
				font-size: 30upx;
				line-height: 30upx;
				left: 21upx;
				bottom: 21upx;
				color: #fff;
			}
		}
	}
	.my-container{
		width: calc(100% - 294upx);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height:314upx;
		.project, .address-book, .leave, .food{
			width:202upx;
			height:152upx;
			background:rgba(255,138,75,1);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-bottom: 13upx;
			position: relative;
			image{
				width:61upx;
				height:67upx;
				margin-bottom: 20upx;
			}
			.message{
				position: absolute;
				font-size: 35upx;
				top: 8upx;
				right: 10upx;
				color: #fff;
			}
			.desc{
				font-size: 22upx;
				color: #fff;
				line-height: 30upx;
				// transform: scale(.9);
				margin-left: 10upx;
			}
		}
		.address-book{
			background:#0D84D5;
			image{
				width:61upx;
				height:67upx;
				margin-bottom: 20upx;
			}
		}
		.leave, .food{
			background:#DB3F77;
			margin-bottom: 0;
			image {
				width: 60upx;
				height: 71upx;
				margin-bottom: 25upx;
			}
			.desc{
				font-size: 22upx;
				line-height: 25upx;
				transform-origin: center;
				margin-left: 10upx;
				color: #fff;
			}
		}
		.food {
			background:rgba(19,181,177,1);
			image{
				width:67upx;
				height:75upx;
			}
		}
	}
	.project-container{
		position: absolute;
		width: calc(100% - 20upx);
		height: 916upx;
		background:rgba(0,0,0,.7);
		border-radius:0px 21upx 21upx 0px;
		top: 20upx;
		left: 0;
		transition: all .3s;
		transform: translateX(-689upx);
		min-height: 916upx;
		padding-top: 28upx;
		box-sizing: border-box;
		.scroll-Y{
			width: 100%;
			height: 100%;
		}
		.project-title{
			font-size:63upx;
			text-indent: 42upx;
			color: #fff;
			line-height:68upx;
			font-weight: bold;
		}
		.project-list{
			width: 100%;
		}
		.project-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 118upx;
			.project-item-left{
				margin-right: 42upx;
				margin-left: 42upx;
				width:21upx;
				height:21upx;
				border-radius:50%;
			}
			&:nth-child(odd) {
				.project-item-left {
					background:#20C998;
				}
			}
			&:nth-child(even) {
				.project-item-left {
					background:#2C6DD2;
				}
			}
			.project-item-left.gray{
				background-color: #999;
			}
			.project-info{
				flex: 1;
				font-size:38upx;
				line-height: 118upx;
				color: #fff;
				border-bottom: 1upx solid #fff;
			}
			.project-info.gray{
				color: #999;
			}
		}
	}
	.project-container.show {
		transform: translateX(0upx)
	}
}
</style>

